<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>备货计划</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/formSelects.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
    <style type="text/css">
        .tmdyTable td{
            border:1px solid #00000080;
        }
    </style>
</head>
<body class="layui-anim">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>备货计划</cite>
        </a>
      </span>
</div>
<div class="x-body">
    <div style="margin-bottom: 18px">
        <div class="layui-inline">
            <table>
                <tr>
                    <td>
                        <input class="layui-input" name="send_number" id="send_number" placeholder="请输入产品名称" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
                    </td>
                   <!-- <td class="layui-input-inline">
                        <input class="layui-input" id="start_time" placeholder="请输入开始时间" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px"> -
                        <input class="layui-input" id="end_time" placeholder="请输入结束时间" autocomplete="off" style="display: inline; width: 180px">
                    </td>-->
                </tr>
            </table>
        </div>
        <button class="layui-btn layui-btn-normal" data-type="reload1"><i class="layui-icon layui-icon-search"></i>检索</button>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-warm" id="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
    </xblock>
    <div id="subDiv2">
        <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
    </div>
</div>



<!-- 二次产品选择框 -->
<div id="addDivID" hidden="hidden">
    <form class="layui-form" id="addFormID" style="margin-top:20px" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="testTime" class="layui-form-label">
                    <span class="x-red">*</span>填写时间
                    <input type="hidden" value="0" id="indexId">
                </label>
                <div class="layui-input-inline" style = "width:260px;">
                    <input type="text" id="testTime" name="remark1" lay-verify="realName"  autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-inline">
                <label for="testTime" class="layui-form-label">
                    <span class="x-red">*</span>系统编号
                </label>
                <div class="layui-input-inline" style = "width:260px;">
                    <input type="text" th:value="${System}"  name="plNumber" lay-verify="realName"  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" id="row01">
            <label class="layui-form-label">
                <span class="x-red">*</span><span>产品名称</span>
            </label>
            <div class="layui-input-inline"  style = "width:260px;">
                <select lay-filter="required" name="maIds" id="maId01">
                    <option value='-1'>请选择产品名称</option>
                    <option th:each="material:${materialList}"  th:value="${material.maId}" th:text="${material.maName}"></option>
                </select>
            </div>

            <div class="layui-inline">
                <label for="quantity" class="layui-form-label" style="padding-left: 15px;width: 95px">
                    <span class="x-red">*</span>产品数量
                </label>
                <div class="layui-input-inline"  style = "width:260px;">
                    <input type="number" id="quantity" name="quantity" lay-verify="number"  class="layui-input">
                </div>

                <label for="quantity" class="layui-form-label">
                   <button type="button" id="addRow" class="layui-btn layui-btn-normal" style="height: 30px" >增加物料</button>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="subBtn" lay-submit lay-filter="addForm">立即提交</button>
                <button  class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>
</div>


<script type="text/html" id="toolBar">
<!--    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">

    var table;
    var customerId2;
    var receiveNumber2;
    layui.use(['table','layer','upload','form','laydate'], function(){
        table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var formSelects = layui.formSelects;
        //执行一个laydate实例
        laydate.render({
            elem: '#testTime', //指定元素
            value:new Date()
        });

        var $ = layui.jquery, active = {
            reload1:function () {
                table.reload('contenttable',{
                    method:'get',
                    where:{
                        maName:$('#send_number').val()
                    }
                    ,page: {
                        //重新从第 1 页开始
                        curr: 1
                    }
                });
            }
        }


        //点击行checkbox选中
        $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length>0) {
                checkCell.click();
            }
        });

        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $("#selectState").val(0)
        form.render();
        table.render({
            elem:'#tableList'
            ,url:'/stayContainerStare/queryAddChoicePlanPage'
            ,title:'machineList'
            ,id :'contenttable'
            ,limits:[10,20,30]
            ,toolbar: '#toolbar'
            ,cols: [
                [
                    {type: 'checkbox',fixed: 'left'},
                    {field: 'id',title:'NO',sort: true,width: 100,type:'numbers',align:'center'},
                    {field: 'plNumber',title: '备货编号',align:'center'},
                    {field:'', title:'图号', align:'center',templet:function (row) {
                            return row.maNumber;
                        }},
                    {field:'', title:'产品名称', align:'center',templet:function (row) {
                            return row.maName;
                        }},
                    {field:'num', title:'数量', width: 80, edit: 'text', align:'center',templet:function (row) {
                            return row.quantity;
                        }},
                    {field: 'realName',title: '操作人',align:'center'},
                    {field: 'remark1',title: '日期',align:'center'},
                    {field: 'remark', title: '操作', toolbar: "#toolBar",align:'center'}
                    //{fixed: 'right',unresize: true, title:'操作', toolbar: '#rowToolbar', width:100, align: 'center'}
                ]
            ]
            ,page: true
            ,done: function(res, curr, count){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold'
                });
            }
        });

        table.on('row(tableList)', function(obj){
            var data = obj.data;
            $("#subDiv").show();
            table.render({
                elem: '#tableDetails'
                ,url:'/static/json/jyy/list2.json'
                ,toolbar: '#toolbar'
                ,title: '明细表'
                ,id :'contenttableDetails'
                ,limits:[10,20,30]
                ,cols: [
                    [
                        {type: 'checkbox',fixed: 'left'},
                        {field:'id', title:'序号', width: 50,type:'numbers', align:'center'},
                        {field:'mid', title:'物料id', align:'center', hide:true},
                        {field: 'customer',title: '供应商',align:'center'},
                        {field:'productNumber', title:'图号', align:'center'},
                        {field:'num', title:'数量', width: 80, edit: 'text', align:'center'},
                        {field:'num', title:'完成数量', align:'center'},
                        {field:'asks', title:'喷涂要求', align:'center'},
                        {field:'special', title:'特殊要求', align:'center'},
                        {field:'remark1', title:'备注1', align:'center'},
                        {field:'remark2', title:'备注2', align:'center'}
                    ]
                ]
                ,page: true
                ,done : function(){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                    })
                }
            });
        });

        //监听行工具事件
        table.on('tool(tableList)', function(obj){
            var data = obj.data;
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //单个删除
            if(obj.event === 'del'){
                layer.confirm('确定删除吗？', function(index){
                    //console.log(data.plDeId);
                    del(data.plDeId);
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                });
            }
        });

        //增加行
        $('#addRow').click(function() {
            var indexId = $('#indexId').val();
            var html = '<div class="layui-form-item">\n' +
                '            <label class="layui-form-label">\n' +
                '                <span class="x-red">*</span><span>产品名称</span>\n' +
                '            </label>\n' +
                '            <div class="layui-input-inline"  style = "width:260px;">\n' +
                '                <select  lay-verify="required" name="maIds" id="indexNumber'+indexId+'"></select>\n' +
                '            </div>\n' +
                '            <div class="layui-inline">\n' +
                '                <label for="quantity" class="layui-form-label" style="padding-left: 15px;width: 95px">\n' +
                '                    <span class="x-red">*</span>产品数量\n' +
                '                </label>\n' +
                '                <div class="layui-input-inline"  style = "width:260px;">\n' +
                '                    <input type="number"  name="quantity" lay-verify="number"  class="layui-input">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>';

            $('#row01').append(function (index,row) {
                $('#indexId').val(parseInt(indexId)+1);
                return html;
            });
            var option = "<option value='-1'>请选择产品名称</option>";//初始化option的选项
            $.ajax({
                type:'get',
                url:'/stayContainerStare/queryMaterialList',
                async:false,
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        option +="<option value='"+result[i]['maId']+"'>"+result[i]['maName']+"</option>";//拼接option中的内容
                        $("#indexNumber"+indexId).html(option);//将option的拼接内容加入select中，注意选择器是select的ID
                    }
                    form.render('select');//重点：重新渲染select
                }
            });
            form.render();
        });

        function del(plDeId) {
            $.ajax({
                type: 'get',
                url: '/stayContainerStare/deleteStayContainerStare',
                data:{'plDeId':plDeId},
                success: function (data) {
                    if (data > 0) {
                        layer.msg('删除成功',{icon: 1})
                    }else {
                        layer.msg("请联系管理员！", {icon: 2});
                    }
                    setTimeout(function(){
                        window.location.reload()
                    },1000);
                }
            })
        }

        //增加
        $("#add").click(function(){
            layer.open({
                type: 1 					//Page层类型
                ,area: ['940px', '530px'] 	//宽  高
                ,title: '新增'
                ,shade: 0.6 				//遮罩透明度
                ,maxmin: true 				//允许全屏最小化
                ,anim: 1 					//0-6的动画形式，-1不开启
                ,content: $('#addDivID')
                ,success: function(){
                    form.render();
                }
            });
        });

        form.on('submit(addForm)', function () {
            var maIdList = [];
            var maId01 = $('#maId01').val();
            if (maId01 == -1) {
                layer.msg('请选择产品名称',{icon:5})
                return false;
            }else {
                maIdList.push(maId01);
            }

            var indexId =  $('#indexId').val();
            for (var i = 0; i <= indexId; i++){
                var maId =  $('#indexNumber'+[i]).val();
                if (maId == -1) {
                    layer.msg('请选择产品名称',{icon:5})
                    return false;
                }else {
                    maIdList.push(maId);
                }
            }





            //判断提交的物料是否为空
            if (maIdList.length == 0) {
                return false;
            }

            function mm(a) {
                return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f" + a.join("\x0f\x0f") + "\x0f");
            }

            var nary = maIdList.sort();
            for(var i = 0; i < nary.length - 1; i++) {
                if(nary[i] == nary[i + 1]) {
                    layer.msg('产品名称重复',{icon:5})
                    return false;
                }
            }


            $("#subBtn").attr("disabled",true);
            $.ajax({
                type:'post',
                url:'/stayContainerStare/addChoicePlan',
                data:$('#addFormID').serialize(),
                cache:false,
            }).done(
                function(res) {
                    if (res) {
                        layer.msg('新增成功',{icon:6})
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                }
            ).fail(
                function() {
                    layer.msg('新增失败',{icon:5})
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            )
            return false;
        })
    });
</script>
</body>
</html>
